<template>
  <div class="container">
    <el-carousel height="180px">
      <el-carousel-item v-for="item in images" :key="item">
        <img class="banner-img" :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- search -->
    <div class="search-input">
      <el-input
        style="width: 40%"
        v-model="queryParams.applyName"
        @keyup.enter="getList(queryParams)"
        placeholder="请输入应用名称"
        class="search-input"
      />
    </div>
    <!-- 基础应用 -->
    <div class="public-title">
      <div class="text">第三方应用</div>
      <div class="arrow" @click="fresh">
        <el-icon :class="{ 'refresh': refreshed }">
          <Refresh />
        </el-icon>
        换一批
      </div>
    </div>
    <el-row class="base">
      <el-col :span="3" class="base-img">
        <img :src="ad1" alt="" />
      </el-col>
      <el-col :span="18" class="base-content">
        <div class="base-item">
          <div class="base-item-content">
            <div class="base-item-content-item" :class="`item_` + (index % 2)" v-for="(app, index) in dataSource" @click="goApp(app.id)" :key="index">
              <div class="base-item-content-item-icon">
                <img :src="app.applyLogo" alt="" />
              </div>
              <div class="base-item-content-item-info">
                <div class="base-item-content-item-info-title">{{ app.applyName }}</div>
                <div class="base-item-content-item-info-desc">{{ app.applyDescription }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="3" class="base-img">
        <img :src="ad2" alt="" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="buy" lang="ts">
import b1 from '@/assets/images/b1.png';
import b2 from '@/assets/images/b2.png';
import ad1 from '@/assets/images/ad1.png';
import ad2 from '@/assets/images/ad2.png';
import app_base from '@/assets/images/app_base.svg';
import app_three from '@/assets/images/app_three.svg';
import apply from '@/api/system/apply';
import { onMounted } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const images = [b1, b2];
const refreshed = ref(false);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  applyType: 3,
  applyName: ''
});
const getList = async (params) => {
  const res = await apply.list(params);
  dataSource.value = res.rows;
};
const dataSource = ref([]);
const goApp = (id: string) => {
  window.open('/application/detail?id=' + id, '_blank');
};
const fresh = () => {
  refreshed.value = !refreshed.value;
  setTimeout(() => {
    refreshed.value = !refreshed.value;
  }, 1500);
  if (dataSource.value.length === queryParams.pageSize) {
    queryParams.pageNum++;
  } else {
    queryParams.pageNum = 1;
  }
  getList(queryParams);
};
onMounted(() => {
  getList(queryParams);
});
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

.banner-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.public-title {
  font-size: 16px;
  color: #303133;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .arrow {
    color: #409eff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;

    .refresh {
      // 旋转动画只运行一次
      animation: rotate 1s 1;
    }
  }
}

.base {
  display: flex;
  justify-content: space-between;
  min-height: 600px;

  .base-img {
    width: 100%;
    height: 600px;

    img {
      width: 100%;
      height: 600px;
      object-fit: cover;
    }
  }

  .base-content {
    .base-item {
      .base-item-title {
        font-size: 16px;
        color: #303133;
        margin-bottom: 10px;
      }

      .base-item-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        margin-left: 10px;

        // .item_0 {
        //     margin-right: 40px;
        // }

        .base-item-content-item {
          width: 248px;
          margin-bottom: 20px;
          height: 80px;
          border: 1px solid #ebeef5;
          border-radius: 8px;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding: 4px;
          cursor: pointer;

          .base-item-content-item-icon {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            // overflow: hidden;

            img {
              width: 60px;
              height: 60px;
              border-radius: 16px;
              overflow: hidden;
            }
          }

          .base-item-content-item-info {
            margin-left: 10px;

            .base-item-content-item-info-title {
              font-size: 16px;
              color: #303133;
            }

            .base-item-content-item-info-desc {
              font-size: 14px;
              color: #606266;
              // 2行超出显示省略号
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}

.search-input {
  margin-top: 20px;
  text-align: center;
}
</style>